<!DOCTYPE html>
<html>
<head>
	<title>Test SVG Filters</title>
<script>
	var dojoConfig = {
		async: true,
		gfxRenderer: 'svg'
	};
</script>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
	require([
		'dojox/gfx',
		'dojox/gfx/svg_mask',
		'dojo/domReady!'
	], function(gfx){

		var surfaceShape = {
				width: 600,
				height: 600
			},
			surface = gfx.createSurface('surface', surfaceShape.width, surfaceShape.height);

		var group = surface.createGroup();
		group.createRect(surfaceShape).setFill('blue');

		// Create mask with the same dimensions as the group
		var maskShape = {
			width: 1,
			height: 1,
			maskContentUnits: 'objectBoundingBox'
		};
		var mask = surface.createMask(maskShape);

		// By default, the mask is applied as if initialized to black (i.e., #000)
		// and will completely mask out objects painted through it.
		// Create a white (i.e., #fff) rectangle in the dimensions of the mask
		// so no painting is masked out by default.
		mask.createRect({
			width: 0.5,
			height: 1
		}).setFill('#fff');

		var margin = 0.1;
		mask.createRect({
			x: margin,
			y: margin,
			width: .5 - margin * 2,
			height: 1 - margin * 2
		}).setFill('black');

		group.setMask(mask);

		var textMargin = 60;
		var text = surface.createText({
			x: surfaceShape.width / 2 + textMargin,
			y: textMargin,
			text: 'Masked Text'
		})
		.setFill('red')
		.setStroke('purple')
		.setFont({
			size: '40px'
		});
		var maskForText = surface.createMask(maskShape);
		maskForText.createRect({
			width: 1,
			height: 1
		})
		.setFill({
			type: 'linear',
			x2: 1,
			y2: 0,
			colors: [
				{ offset: 0, color: '#111' },
				{ offset: 1, color: '#ddd' }
			]
		});
		text.setMask(maskForText);

		var image = surface.createImage({
			x: 300,
			y: 100,
			width: 300,
			height: 300,
			src: 'images/maps.png'
		});
		var textMask = surface.createMask({});
		textMask.createText({
			x: 375,
			y: 250,
			text: 'Text Mask'
		})
		.setFill('white')
		.setFont({
			size: "40px"
		});
		image.setMask(textMask);
	});
</script>
</head>
<body>
<div id="surface" style="width: 600px; height: 600px; background: #FFFFE0"></div>
</body>
</html>
